<template>
	<div class="gift-popup">
		<el-card class="memorial-shop-card" body-style="padding: 0;">
			<!-- Header Tabs -->
			<div class="shop-header">
				<el-tabs v-model="activeTab" class="shop-tabs" @tab-click="handleTabClick">
					<el-tab-pane v-for="items in giftCateList" :key="items.id" :label="items.name"
						:name="items.id"></el-tab-pane>
				</el-tabs>
				<el-button class="close-btn" :icon="CloseBold" link @click="handleClose" />
			</div>

			<!-- Content Area (Only showing content for '献花' tab) -->
			<div class="shop-content">
				<!-- Item Grid with Scroll -->
				<div class="item-grid-container">
					<el-scrollbar height="360px">
						<el-row :gutter="10" class="item-grid" v-if="activeTabName !== '扫墓'">
							<el-col :span="6" v-for="giftItem in giftList" :key="giftItem.id"
								@click="handleSelect(giftItem)">
								<div class="shop-item">
									<div class="item-image-placeholder">
										<el-image :src="giftItem.cover" style="width: 100%;height: 100%;"
											fit="contain" />
									</div>
									<p class="item-name">{{ giftItem.name }}</p>
									<p class="item-price">
										<span v-if="giftItem.price === 0" class="free">免费</span>
										<span v-else>{{ muDetail.type == 1 ? giftItem.price : muDetail.type == 2 ? giftItem.vip_price : giftItem.svip_price }}永恒币</span>
										<el-icon>
											<Clock />
										</el-icon>
										<span>{{ giftItem.expire_time }}天</span>
									</p>
								</div>
							</el-col>
						</el-row>
						<el-row  class="item-grid" v-if="activeTabName === '扫墓'">
							<el-col :span="24" v-for="(giftItem, index) in giftList" :key="giftItem.id"
								@click="handleSelect(giftItem)">
								<div class="shop-item-saomu" v-if="index == 0">
									<div class="shop-item-left">
										<div class="item-image-placeholder">
											<el-image :src="giftItem.cover" style="width: 100%;height: 100%;"
												fit="contain" />
										</div>
										
										<p class="item-name">{{ giftItem.name }}</p>
										<p class="item-price">
											<span v-if="giftItem.price === 0" class="free">免费</span>
											<span v-else>{{ muDetail.type == 1 ? giftItem.price : muDetail.type == 2 ? giftItem.vip_price : giftItem.svip_price }}永恒币</span>
											<el-icon>
												<Clock />
											</el-icon>
											<span>{{ giftItem.expire_time }}天</span>
										</p>
									</div>
									<div class="shop-item-right">
										<div class="shop-item-right_title" v-show="props.muDetail.repair_time != 0">
											<span>距离上次修缮已第</span>
											<span style="color: #f00;margin: 0 5px;">{{daysPassedSince(props.muDetail.repair_time * 1000)}}</span>
											<span>天</span>
										</div>
										<div class="shop-item-right_lastTime"  v-show="props.muDetail.repair_time != 0">
											上次修缮：{{ props.muDetail.repair_name }} <span style="margin: 0 0 0 15px;">{{ timeFormat(props.muDetail.repair_time * 1000, 'yyyy-mm-dd hh:MM') }}</span>
										</div>
										<div class="shop-item-right_explain">
											修缮说明：对墓地裂痕进行修复、墓碑翻新等...【提示】：离上次修缮超过300天后，才需再次修缮。
										</div>
										<div class="shop-item-right_tips">
											普通馆{{ giftItem.price }}永恒币、豪华馆 {{ giftItem.vip_price }} 永恒币、尊贵馆{{ giftItem.svip_price }}永恒币
										</div>
									</div>
								</div>
								<div class="shop-item-saomu" v-if="index == 1">
									<div class="shop-item-left">
										<div class="item-image-placeholder">
											<el-image :src="giftItem.cover" style="width: 100%;height: 100%;"
												fit="contain" />
										</div>
										
										<p class="item-name">{{ giftItem.name }}</p>
										<p class="item-price">
											<span v-if="giftItem.price === 0" class="free">免费</span>
											<span v-else>{{ muDetail.type == 1 ? giftItem.price : muDetail.type == 2 ? giftItem.vip_price : giftItem.svip_price }}永恒币</span>
											<el-icon>
												<Clock />
											</el-icon>
											<span>{{ giftItem.expire_time }}天</span>
										</p>
									</div>
									<div class="shop-item-right">
										<div class="shop-item-right_title"  v-show="props.muDetail.clear_time != 0">
											<span>距离上次扫墓已第</span>
											<span style="color: #f00;margin: 0 5px;">{{daysPassedSince(props.muDetail.clear_time * 1000)}}</span>
											<span>天</span>
										</div>
										<div class="shop-item-right_lastTime" v-show="props.muDetail.clear_time != 0">
											上次扫扫墓：{{ props.muDetail.clear_name }} <span style="margin: 0 0 0 15px;">{{ timeFormat(props.muDetail.clear_time * 1000, 'yyyy-mm-dd hh:MM') }}</span>
										</div>
										<div class="shop-item-right_explain">
											扫墓说明：对墓园进行打扫，除去杂草、落叶、青苔等...【提示】：离上次扫墓超过120天后，才需再次扫墓。
										</div>
										<div class="shop-item-right_tips">
											普通馆{{ giftItem.price }}永恒币、豪华馆 {{ giftItem.vip_price }} 永恒币、尊贵馆{{ giftItem.svip_price }}永恒币
										</div>
									</div>
								</div>
							</el-col>
						</el-row>
					</el-scrollbar>
				</div>
				<!-- Footer Hint -->
				<div class="scroll-hint" v-if="giftList.length > 10">
					滑动查看更多
				</div>
			</div>
		</el-card>
		<!-- </popup> -->
	</div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, shallowRef, watch, nextTick, defineExpose, toRaw } from 'vue';
import { CloseBold, Clock, ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue';
import Popup from '@/components/popup/index.vue'
import { apiMuGiftList } from '@/api/gift'
//   const emit = defineEmits(['success', 'close'])
import { daysPassedSince, timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback';
const props = defineProps({
	muDetail: {
		type: Object,
		default: () => ({})
	}
})

const emit = defineEmits<{
	(e: 'success', params: object): void;
	(e: 'close'): void;
}>();
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
// const popupTitle = computed(() => {
//     return mode.value == 'edit' ? '编辑相册文件夹' : '新增相册文件夹'
// })
const activeTab = ref(2);
const activeTabName = ref('')

const handleSelect = async (giftItem: GiftItem) => {
	console.log(giftItem)
	if(giftItem.name == '扫墓'){
		if(daysPassedSince(props.muDetail.clear_time * 1000) < 120){
			feedback.msgWarning('只有超过120天才能进行扫墓')
			return false
		}
	}

	if(giftItem.name == '修缮'){
		if(daysPassedSince(props.muDetail.repair_time * 1000) < 300){
			feedback.msgWarning('只有超过300天才能进行修缮')
			return false
		}
	}
	popupRef.value?.close()
	emit('success', giftItem)
}

const handleClose = () => {
	emit('close')
}

const open = (type = 'add') => {
	mode.value = type
	popupRef.value?.open()
}

interface OfferingItem {
	create_time: string,
	id: number | string,
	name: string
	pid: number | string
	sort: number | string
	status: number | string
	update_time: string,
}
const giftCateList = ref<Array<OfferingItem>>([])

interface GiftItem {
	create_time: string,
	id: number | string,
	name: string
	pid: number | string
	sort: number | string
	status: number | string
	update_time: string,

	price: number,
	vip_price: number,
	svip_price: number,
	expire_time: number,
	cover: string,
	desc: string,
	cid: number | string,
	is_recommend: number
}
const giftList = ref<Array<GiftItem>>([])
const setFormData = (data: Record<any, any>) => {
	console.log(data)
	giftCateList.value = data.giftCateList
	giftList.value = data.giftList
	activeTab.value = data.tabIndex
	activeTabName.value = data.activeTabName
	console.log(toRaw(giftCateList.value), toRaw(giftList.value))
}


// 切换tabs
const handleTabClick = (tab: any) => {
	console.log(toRaw(tab), tab)
	activeTab.value = tab.props.name
	activeTabName.value = tab.props.label
	getpiMuGiftList()
}

const getpiMuGiftList = async () => {
	const res = await apiMuGiftList({ cid: activeTab.value, mu_id: props.muDetail.id })
	console.log(res)
	giftList.value = res
}
defineExpose({
	open,
	setFormData
})
</script>

<style scoped lang="scss">
.memorial-shop-card {
	width: 650px; // Adjust width to match the image
	background-color: #fdfbf6; // Approximate background color
	border: 1px solid #e0e0e0;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	position: relative; // For absolute positioning of close button
}

.shop-header {
	position: relative;
	padding: 0 15px; // Add padding to align tabs
	border-bottom: 1px solid #eee;
	background-color: #f9f6f0; // Slightly different shade for header
}

// Style Element Plus Tabs
:deep(.el-tabs__header) {
	margin: 0; // Remove default bottom margin
}

:deep(.el-tabs__nav-wrap::after) {
	content: none; // Remove the default bottom border of the tab header
}

:deep(.el-tabs__item) {
	color: #666;
	padding: 0 15px; // Adjust padding
	height: 45px; // Adjust height
	line-height: 45px;

	&:hover {
		color: #c0392b; // Example hover color
	}

	&.is-active {
		color: #333; // Active tab color
		font-weight: bold;
		// Add a subtle indicator if needed, e.g., border-bottom
		// border-bottom: 2px solid #c0392b;
	}
}

:deep(.el-tabs__active-bar) {
	// Hide default active bar or style it differently if needed
	// display: none;
	background-color: #c0392b; // Example active bar color
	height: 2px;
}

.close-btn {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	font-size: 18px;
	color: #999;

	&:hover {
		color: #555;
	}
}

.shop-content {
	padding: 10px 15px 15px 15px;
}

.sub-filters {
	margin-bottom: 15px;
	display: flex;
	gap: 20px;
	padding-left: 5px; // Small indent
}

.filter-item {
	font-size: 14px;
	color: #666;
	cursor: pointer;
	padding: 5px 0; // Add some vertical padding

	&.active {
		color: #c0392b; // Active filter color (example)
		font-weight: bold;
		border-bottom: 2px solid #c0392b; // Active indicator
	}

	&:hover {
		color: #c0392b;
	}
}

.item-grid-container {
	position: relative; // For positioning scroll arrows
}

.item-grid {
	// padding-right: 25px; // Make space for scroll arrows if needed
}

.scroll-arrows {
	position: absolute;
	right: 5px; // Position next to the scrollbar area
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 5px;
	color: #aaa;
	font-size: 16px;

	.el-icon {
		cursor: pointer;

		&:hover {
			color: #666;
		}
	}
}


.shop-item {
	text-align: center;
	margin-bottom: 15px; // Space below each item
	background-color: #fff; // White background for items
	border: 1px solid #eee;
	border-radius: 3px;
	padding: 10px 5px 5px 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 155px; // Fixed height for alignment
	box-sizing: border-box;
}

.item-image-placeholder {
	width: 80px; // Adjust size as needed
	height: 80px; // Adjust size as needed
	// background-color: #f0f0f0; // Placeholder color
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ccc;
	font-size: 12px;
	// Optionally add a placeholder icon or text:
	// &::after { content: 'Image'; }
}

.item-name {
	font-size: 13px;
	color: #333;
	margin: 0 0 5px 0;
	white-space: nowrap; // Prevent wrapping
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

.item-price {
	font-size: 12px;
	color: #888;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px; // Space between elements
	line-height: normal; // Reset line height

	.free {
		color: #e67e22; // Orange color for 'Free'
		font-weight: bold;
	}

	.el-icon {
		font-size: 12px; // Match text size
		position: relative;
		//   top: 1px; // Slight vertical alignment
	}
}

.scroll-hint {
	text-align: center;
	font-size: 13px;
	color: #999;
	margin-top: 10px;
	padding: 5px 0;
	background-color: #f9f6f0; // Match header background
	border-top: 1px solid #eee;
	margin: 10px -15px -15px -15px; // Extend to card edges
	border-bottom-left-radius: 4px; // Match card radius
	border-bottom-right-radius: 4px;
}

// Fine-tune scrollbar appearance if needed
:deep(.el-scrollbar__bar.is-vertical) {
	width: 6px; // Slimmer scrollbar
	opacity: 0.7;
}

:deep(.el-scrollbar__thumb) {
	background-color: #ccc; // Lighter thumb
	border-radius: 3px;
}

.gift-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.shop-item-saomu{
	width: 100%;
	text-align: center;
	margin-bottom: 15px; // Space below each item
	background-color: #fff; // White background for items
	border: 1px solid #eee;
	border-radius: 3px;
	padding: 10px 5px 5px 5px;
	display: flex;
	align-items: center;
	height: 205px; // Fixed height for alignment
	box-sizing: border-box;
}
.shop-item-saomu .shop-item-left{
	width: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.shop-item-saomu .shop-item-right{
	width: calc(100% - 140px);
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	margin-left: 20px;
}
.shop-item-saomu .shop-item-right .shop-item-right_title{
	font-size: 1rem;
	font-weight: bold;
	color: #000;
}
.shop-item-right_lastTime{
	font-size: 1rem;
	font-weight: bold;
	color: #000;
}
.shop-item-right_explain{
	font-size: 1rem;
    width: 100%;
    color: #666;
    position: relative;
	text-align: left;
	margin-top: 10px;
}
.shop-item-right_tips{
	font-size: 0.8rem;
    width: 100%;
    color: #666;
    position: relative;
	text-align: left;
	margin-top: 30px;
}
</style>